<template>
  <div class="scenecont">
    <div style="width: 1200px; margin: 0 auto">
      <!-- 面包屑 -->
      <a-breadcrumb class="Allbreadcrumb" separator=">">
        <a-breadcrumb-item>
          <a href="/">首页</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item><a href="/competition/index">大赛活动</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item><a href="/competition/track">互联网及服务</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item><a href="/competition/track">低代码</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item><a href="/competition/details">项目详情</a>
        </a-breadcrumb-item>
        <a-breadcrumb-ite style="color: #ffbe37">公司主页</a-breadcrumb-ite>
      </a-breadcrumb>
      <!-- 企业简介 -->
      <div class="screen">
        <div class="companyconttop">
          <div class="displayinline">
            <img class="qiyeimg" src="@/assets/image/competition/qylogo.png" alt="">
          </div>
          <div class="displayinline xqdetail">
            <div class="fllf">
              <p class="txt1">爱心阳光</p>
              <p class="txt2">
                所属行业：互联网
              </p>
            </div>
            <div class="flrf">
              <p class="buttonstyle">
                联系企业
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- 详细介绍 -->
      <div class="companydetail">
        <a-tabs v-model:activeKey="activeKey">
          <a-tab-pane key="1" tab="企业介绍">
            <div class="mt20">
              活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求，拓宽创业就业领域，鼓励残疾人、残疾人家庭成员通过培训具备一技之长，实现“双向推进”格局，推动残疾人、残疾人家庭事业发展，引导社会各界机构持续关注残疾人、残疾人家庭事业发展。
              活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求，拓宽创业就业领域，鼓励残疾人、残疾人家庭成员通过培训具备一技之长，实现“双向推进”格局，推动残疾人、残疾人家庭事业发展，引导社会各界机构持续关注残疾人、残疾人家庭事业发展。
            </div>
            <div>
              <img src="@/assets/image/competition/qyxxjs.png" alt="">
            </div>
            <div class="h1title">
              标题1
            </div>
            <div>
              <div class="txt3">
                <p>
                  活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求，拓宽创业就业领域，鼓励残疾人、残疾人家庭成员通过培训具备一技之长，实现“双向推进”格局，推动残疾人、残疾人家庭事业发展，引导社会各界机构持续关注残疾人、残疾人家庭事业发展备一技之长，实现“双向推进”格局，推动残疾人、残疾人家庭事业发展，引展，引导社会各界机构持续关注残疾人、残疾人家庭事业发展备一技之长，实现“双向推进”格局，推动残疾人、残疾人家庭事业发展，引导社会各界机构持续关注残疾人家庭成员通过残疾人家庭成员通过残疾人家庭成员通过残疾人、残疾人家庭事业发展。
                </p>
                <p>
                  活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求，拓宽创业就业领域，鼓励残疾人、残疾人家庭成员通过残疾人家庭成员通过培训具备一技之长，实现“双向推进”格局，推动残疾人、残疾人家庭事业发展，引导社会各界机构持续关注残疾人、残疾人家庭事业发展。
                </p>

              </div>
              <span>
                <img src="@/assets/image/competition/qyjs2.png" alt="">
              </span>
              <div class="h1title">
                标题1
              </div>
              <div class="mt20">
                活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求，拓宽创业就业领域，鼓励残疾人、残疾人家庭成员通过培训具备一技之长，实现“双向推进”格局，推动残疾人、残疾人家庭事业发展，引导社会各界机构持续关注残疾人、残疾人家庭事业发展备一技之长，实现“双向推进”格局，推动残疾人、残疾人家庭事业发展，引展。
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="团队介绍" force-render>
            111111111111

          </a-tab-pane>
        </a-tabs>
      </div>


      <!-- 创业、就业、教育 -->
      <div class="bottomcont">
        <!-- 创业项目 -->
        <div class="leftwarp">

          <div class="cyxmcon">
            <a-tabs v-model:activeKey="activeKey">
                <a-tab-pane key="1" tab="创业项目">
                  <ul class="tjxmul">
                  	<li>
                      <div class="displayinline2">
                        <img class="cyimgw" src="@/assets/image/competition/atc2.png" alt="">
                      </div>
                      <div class="displayinline2 wie1">
                        <p class="txt5" @click="gotochuangye()">项目名称内容文本项目名称内容文本项目名称内容文本</p>
                        <p class="mt12 txt6">
                          通过全面、精心、独特的培训和服务，为失业妇女及残障人员等贫困弱势人群搭建起学习、互助、交流的平台，使他们在参与社会活动时…
                        </p>
                      </div>
                    </li>
                    <li>
                      <div class="displayinline2">
                        <img class="cyimgw" src="@/assets/image/competition/atc2.png" alt="">
                      </div>
                      <div class="displayinline2 wie1">
                        <p class="txt5" @click="gotochuangye()">项目名称内容文本项目名称内容文本项目名称内容文本</p>
                        <p class="mt12 txt6">
                          通过全面、精心、独特的培训和服务，为失业妇女及残障人员等贫困弱势人群搭建起学习、互助、交流的平台，使他们在参与社会活动时…
                        </p>
                      </div>
                    </li>
                  </ul>
                </a-tab-pane>
              </a-tabs>
          </div>

          <!-- 教育培训 -->
          <div class="jypxcon">
            <a-tabs v-model:activeKey="activeKey">
                <a-tab-pane key="1" tab="教育培训">
                  <ul class="tjxmul">
                  	<li>
                      <div class="displayinline2">
                        <img class="jyimgw" src="@/assets/image/competition/live4.png" alt="">
                      </div>
                      <div class="displayinline2 wie2">
                        <p class="txt5"  @click="gotojypx()">项目名称内容文本项目名称内容文本项目名称内容文本</p>
                        <p class="mt12 txt6">
                          通过全面、精心、独特的培训和服务，为失业妇女及残障人员等贫困弱势人群搭建起学习、互助、交流的平台，使他们在参与社会活动时…
                        </p>
                        <p class="txt7">李明  |  标签名称</p>
                      </div>
                    </li>
                    <li>
                      <div class="displayinline2">
                        <img class="jyimgw" src="@/assets/image/competition/live4.png" alt="">
                      </div>
                      <div class="displayinline2 wie2">
                        <p class="txt5" @click="gotojypx()">项目名称内容文本项目名称内容文本项目名称内容文本</p>
                        <p class="mt12 txt6">
                          通过全面、精心、独特的培训和服务，为失业妇女及残障人员等贫困弱势人群搭建起学习、互助、交流的平台，使他们在参与社会活动时…
                        </p>
                        <p class="txt7">李明  |  标签名称</p>
                      </div>
                    </li>
                    <li>
                      <div class="displayinline2">
                        <img class="jyimgw" src="@/assets/image/competition/live4.png" alt="">
                      </div>
                      <div class="displayinline2 wie2">
                        <p class="txt5" @click="gotojypx()">项目名称内容文本项目名称内容文本项目名称内容文本</p>
                        <p class="mt12 txt6">
                          通过全面、精心、独特的培训和服务，为失业妇女及残障人员等贫困弱势人群搭建起学习、互助、交流的平台，使他们在参与社会活动时…
                        </p>
                        <p class="txt7">李明  |  标签名称</p>
                      </div>
                    </li>
                  </ul>
                </a-tab-pane>
              </a-tabs>
          </div>

        </div>
        <!-- 就业项目 -->
        <div class="jyxmcon">
          <div class="pltop">
            就业信息
          </div>
          <div class="jyxxcon">
            <ul class="jyxxul">
            	<li>
                <p class="txt9" @click="gotopositions()">电话客服</p>
                <p class="txt8">大专  |  1-3年  |  肢体残疾</p>
                <p class="xinzi">8K-10K/月</p>
              </li>
              <li>
                <p class="txt9" @click="gotopositions()">电话客服</p>
                <p class="txt8">大专  |  1-3年  |  肢体残疾</p>
                <p class="xinzi">8K-10K/月</p>
              </li>
              <li>
                <p class="txt9" @click="gotopositions()">电话客服</p>
                <p class="txt8">大专  |  1-3年  |  肢体残疾</p>
                <p class="xinzi">8K-10K/月</p>
              </li>
              <li>
                <p class="txt9" @click="gotopositions()">电话客服</p>
                <p class="txt8">大专  |  1-3年  |  肢体残疾</p>
                <p class="xinzi">8K-10K/月</p>
              </li>
              <li>
                <p class="txt9">电话客服</p>
                <p class="txt8">大专  |  1-3年  |  肢体残疾</p>
                <p class="xinzi">8K-10K/月</p>
              </li>
            </ul>
          </div>
        </div>


      </div>

    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeKey: "1",
      }
    },

    watch: {

    },
    mounted() {


    },
    methods: {
      gotojypx(){ //前往教育培训页面
        this.$router.push('/competition/training')
      },
      gotochuangye(){ //前往创业页面
        this.$router.push('/competition/entrepreneurship')
      },
      gotopositions(){ //前往创业页面
        this.$router.push('/competition/positions')
      }
    }
  }
</script>

<style scoped="scoped">
  .txt1 {
    font-size: 24px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    margin-bottom: 24px;
    margin-top: 10px;
  }

  .jyxxul{
    padding: 16px 0;
  }

  .jyxxul>li{
    position: relative;
    padding: 8px 0;
    margin-bottom: 24px;
  }

  .txt8{
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    margin-top: 12px;
  }

  .txt9{
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    cursor: pointer;
  }

  .pltop{
    padding: 8px 24px 8px 0;
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #1A1A1A;
    line-height: 34px;
    border-bottom: 1px solid #D8D8D8;
  }

  .txt7{
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    margin-top: 19px;
  }

  .jyimgw{
    width: 180px;
    height: 120px;
  }

  .cyimgw{
    width: 158px;
    height: 90px;
  }

  .mt12{
    margin-top: 12px;
  }

  .txt6{
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
  }

  .txt5{
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #333333;
    margin-top: 4px;
    cursor: pointer;
  }

  .wie1{
    width: 531px;
    margin-left: 16px;
  }

  .wie2{
    width: 515px;
    margin-left: 16px;
  }

  .tjxmul>li{
    margin-bottom: 24px;
  }

  .xinzi{
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFBE37;
    position: absolute;
    top: 8px;
        right: 0;
  }

  .displayinline2{
    display:inline-block;
    vertical-align: top;
  }

  .jyxmcon{
    width: 420px;
    height: 510px;
    background: #FFFFFF;
    display: inline-block;
    padding: 24px;
  }

  .leftwarp{
    display: inline-block;
    vertical-align: top;
    margin-right: 20px;
    width: 760px;
  }

  .jypxcon{
    width: 760px;
    height: 522px;
    background: #FFFFFF;
    margin-top: 20px;
    padding: 24px;
  }

  .bottomcont{
    width: 1200px;
    margin-top: 20px;
  }

  .cyxmcon{
    width: 760px;
    height: 318px;
    background: #FFFFFF;
    display: inline-block;
    vertical-align: top;
    margin-right: 20px;
    padding: 24px;
  }

  .mt20 {
    margin: 20px 0
  }

  .txt3 {
    width: 853px;
    display: inline-block;
    vertical-align: top;
    margin-right: 20px;
  }

  .txt3>p {
    margin: 10px 0;
  }

  .scenecont {
    background: #F5F6FA;
    padding-bottom: 20px;
  }

  .h1title {
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    margin-top: 24px;
  }

  .companydetail {
    width: 1200px;
    height: 860px;
    background: #FFFFFF;
    margin-top: 20px;
    padding: 24px;
  }

  .flrf {
    position: absolute;
    right: 0px;
    top: 22px;
  }

  .xqdetail {
    width: 1030px;
    margin-left: 24px;
    position: relative;
  }

  .txt2 {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
  }

  ::-webkit-scrollbar-track-piece {

    border-radius: 6px;
    background-color: #ccc;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #eee;
    background-clip: padding-box;
    min-height: 28px;
  }

  .displayinline {
    display: inline-block;
    vertical-align: top;
  }

  .buttonstyle {
    width: 180px;
    height: 40px;
    background: #FFBE37;
    border-radius: 20px;
    text-align: center;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 40px;
  }

  .qiyeimg {
    width: 80px;
    height: 80px;
    background: #FFFFFF;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    border: 1px solid #D9D9D9;
  }

  .screen {
    width: 1200px;
    height: 128px;
    background: #FFFFFF;
  }

  .companyconttop {
    width: 1200px;
    height: 128px;
    background: url(~@/assets/image/competition/companylogo.png) rgba(19, 41, 84, 0.2);
    padding: 24px 32px;
  }



  /deep/ .ant-tabs-nav .ant-tabs-tab:last-child {
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }

  /deep/ .ant-tabs-nav .ant-tabs-tab-active {
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600 !important;
    color: #1A1A1A;
    text-shadow: none;
  }

  /deep/ .ant-tabs-nav .ant-tabs-tab {
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }

  /deep/ .ant-tabs-ink-bar {
    background-color: #1A1A1A;
  }

  /deep/ .ant-tabs-bar {
    border-bottom: 1px solid #D8D8D8;
  }
</style>
